<template>
    <div class="index clearafter">
        <div >
            <form class="form-horizontal cb" role="form" id="selectmodule" v-on:submit.prevent="savemodule">
                        <div class="modal-body">
                            <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="start"></span>患者姓名:</label>
                                        <div class="col-md-6">
                                             
                                <input type="text" id="start2" v-model="params.personName" class="form-control" disabled>
                                        </div>
                            </div>
                            <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="start"></span>健康记录:</label>
                                        <div class="col-md-6">
                                            <textarea v-model="params.note" required rows="5" maxlength="1000" class="form-control"></textarea>
                                        </div>
                            </div>
                            
                        </div>

                        <div class="modal-footer savebtn">
                            <button type="submit" class="default ok center">确认</button>
                        </div>
                    </form>   
        </div>
    </div>
</template>
<script>
import 'assets/lib/laydate/laydate.js'
import 'assets/lib/laydate/need/laydate.css'
import 'assets/lib/laydate/skins/danlan/laydate.css'
import Public from 'assets/public.js'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/markPoint');
require('echarts/lib/component/dataZoom');
import bootPage from 'components/BootPage.vue'

module.exports = {
    data() {
            return {
                params:{
                    mpiId:"",
                    note:"",
                    personName:"",
                    phoneNo:"",
                }
            }
        },
        props: {
            //      "title":{
            //  type:String,
            //  default:"标题"
            // },

        },
        components: {
            bootPage
        },
        ready() {
           

        },
        methods: {
            // 关闭趋势图弹框
                closecharts() {
                    $("#charts").hide();
                },
                //根据起始时间和结束时间搜索健康列表
                searchselftestbytime(item) {
                  var that = this;
                  this.params.mpiId = item.person.mpiId;
                  this.params.personName = item.person.personName;
                  this.params.phoneNo = item.person.phoneNo;
                },
                searchselftestbytime2() {
                    var that = this;
                     $.when(Public.commonajax("coms.monitoringService", "searchMonitoringList", "[" + JSON.stringify(that.params)+ "]"))
                            .done(function(res) {
                                if (res.code==200) {
                                    that.data1 = res.body;
                                    console.log(that.data1);
                                }
                            })
                    
                },
                showcharts() {
                    $("#charts1").show();
                    $("#main1").height(430);
                    $("#main1").width(600);
                    let tempobj = {
                        "endDate": this.param.endDate,
                        "indexBelongName": item.indexBelongName,
                        "mpiId": this.param.mpiId,
                        "startDate": this.param.startDate

                    };

                    // 获取趋势图数据
                    $.when(Public.commonajax("coms.selftestindexdefService", "patientIndexStaticsOnWeb", "[" + JSON.stringify(tempobj) + "]"))
                        .done(function(res) {
                            let resdata = res.body.bottomData;
                            let legenddata = [],
                                seriesdata = [];
                            if (res.code == 200) {
                                $.each(resdata, function(index, el) {
                                    legenddata.push(el.indexName);
                                    var temobj = {
                                        name: el.indexName,
                                        type: 'line',
                                        data: el.list.map(function(item) {
                                            return item.quantifyVal;
                                        })
                                    }
                                    seriesdata.push(temobj);

                                    //  $.each(el.list,function(index2, el2) {
                                    //     xAxisdata.push(el2.selfTestTime);
                                    // });
                                });
                                console.log(resdata[0].list[0].selfTestTime.substr(5, 11));
                                let xAxisdata = resdata[0].list.map(function(item) {
                                    return item.selfTestTime.substr(5, 11);
                                });


                                // if(resdata.length>1){
                                //    legenddata.push(resdata[0].indexName);
                                //    legenddata.push(resdata[1].indexName);
                                // }else{
                                //     legenddata.push(resdata[0].indexName);
                                // }
                                // var arr222=[{
                                //        name: resdata[0].indexName,
                                //        type: 'line',
                                //        data: resdata[0].list.map(function(item) {
                                //            return item.quantifyVal;
                                //        })
                                //    }];

                                // legenddata.push(resdata[0].indexName);
                                var myChart = echarts.init(document.getElementById('main'));

                                myChart.setOption({
                                    title: {
                                        text: '',
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: legenddata,
                                        right: 20
                                    },

                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: xAxisdata
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value}'
                                        }
                                    },
                                    dataZoom: [{
                                        type: 'slider',
                                        xAxisIndex: 0,
                                        filterMode: 'empty'
                                    }],
                                    series: seriesdata
                                });
                            }
                        })

                },
                refresh() {
                    this.$refs.page.refresh()
                },

            addMonitor:function(){
               $("#editmodule1").modal("show");
                         $("#editmodule1 .modal-dialog").css("width","500px");
                           var that = this;
                    $.when(Public.commonajax("coms.monitoringService", "findMonitoringItem", "[]"))
                .done(function(res) {
                    if (res.code == 200) {
                        that.aaa = res.body[0];
                        that.list.monitoringItemUnit = that.aaa.monitoringItemUnit;
                        that.list.monitoringItemName = that.aaa.monitoringItemName;
                        that.list.monitoringItemId = that.aaa.monitoringItemId;
                        console.log(that.aaa);
                        that.programs = res.body;
                    }
                });
            },
            change:function(){ 
                var that = this;
                console.log(this.aaa);
                that.list.monitoringItemUnit = that.aaa.monitoringItemUnit;
                        that.list.monitoringItemName = that.aaa.monitoringItemName;
                        that.list.monitoringItemId = that.aaa.monitoringItemId;
            },
            // change1:function(){
            //         var that = this;
            //             that.params.monitoringItemId = that.bbb.monitoringItemId;
            // },
            savemodule:function(){
                var that = this;
                
                     $.when(Public.commonajax("coms.workDailyService", "savePatientNote", "["+JSON.stringify(that.params)+"]"))
                .done(function(res) {
                    if (res.code == 200) {
                        Public.ajaxPrompt("保存成功");
                    }else{
                        Public.ajaxPrompt(res.msg);
                    }
                });
                
            },
            turnOff:function(){
                $("#editmodule1").modal('hide');
                this.list.monitoringValue ="";
            }

        },
        events: {
            // 分页组件传回的表格数据
            'data' (data) {
                $.each(data, function(index, el) {
                    el.isshowchart = el.itemList.some(item =>
                        item.indexType == "01"
                    )
                });
                this.selftestlist = data;
                console.log(this.selftestlist);
            }
        },
}
</script>
<style scoped>
.paientinfo {
    padding-bottom: 20px;
    border-bottom: 1px dashed #EFEFEF;
    width: 90%;
    margin: 20px auto;
}

.paientinfo table {
    width: 100%;
}

.paientinfo #table1 td p span {
    display: inline-block;
    margin-left: 10px;
    height: 20px;
}
.paientinfo #table1{
    margin-bottom: 20px;
}
.paientinfo #table1 td .iphone {
    background: url(../assets/img/iphone.png) no-repeat left center;
    padding-left: 20px;
}

.paientinfo #table1 td .other {
    font-size: 12px;
    color: #999;
}

.paientinfo #table1 td .name {
    font-weight: 700;
}

.okborder {
    border: #1dc499 solid 1px;
    color: #1dc499;
    width: 80px
}

.noradius {
    border-radius: 0;
    width: 100px
}

.testlist {
    width: 90%;
    border-bottom: none;
    min-height: 500px
}

.testlist tr {
    border-bottom: 1px dashed #EFEFEF;
    padding: 15px 0
}

.testlist tr th {
    padding: 0 0 20px;
    font-weight: normal;
}

.testlist tr td {
    padding: 15px 0
}

#main {
    width: 600px;
    height: 400px
}

.testlist input {
    border: 1px solid #EFEFEF;
    margin: 0 20px 0 10px;
    padding: 3px 10px 3px 10px
}

#searchselftest {
    display: inline-block;
    color: #333
}

.Danger {
    height: 24px;
    width: 24px;
    color: #fff;
    background: #F8684E;
    display: inline-block;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
}

.colorred {
    color: #F8684E
}

#selftestindex {
    width: 100px;
    border: 1px solid #EFEFEF;
    margin-right: 10px;
}

.w80 {
    width: 80px
}
.paientinfo #table1 span:nth-child(1){
    font-size: 18px;
    color: #333333;
}
.paientinfo #table1 span:nth-child(2){
    font-size: 14px;
    color: #333333;
    margin-right: 30px;
    margin-bottom: 30px;
    display: inline-block;
}
 #table1 button{
    margin-right: 30px;
}
</style>
